<template>
  <view class="container">
    <!-- 服务分类 -->
    <scroll-view class="category-scroll" scroll-x>
      <view
        class="category-item"
        v-for="(item, index) in categories"
        :key="index"
        :class="{ active: currentCategory === index }"
        @click="changeCategory(index)"
      >
        {{ item.name }}
      </view>
    </scroll-view>

    <!-- 服务列表 -->
    <view class="service-list">
      <view
        class="service-item"
        v-for="(item, index) in serviceList"
        :key="index"
        @click="navigateToDetail(item.id)"
      >
        <image :src="item.image" mode="aspectFill"></image>
        <view class="service-info">
          <view class="title-price">
            <text class="title">{{ item.name }}</text>
            <text class="price">¥{{ item.price }}</text>
          </view>
          <text class="description">{{ item.description }}</text>
          <view class="tags">
            <text
              class="tag"
              v-for="(tag, tagIndex) in item.tags"
              :key="tagIndex"
              >{{ tag }}</text
            >
          </view>
          <view class="appointment-info">
            <text class="appointment-count"
              >已预约{{ item.appointmentCount }}次</text
            >
            <button
              class="appointment-btn"
              @click.stop="makeAppointment(item.id)"
            >
              立即预约
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 无数据提示 -->
    <view class="empty" v-if="serviceList.length === 0">
      <image src="/static/icons/empty.png" mode="aspectFit"></image>
      <text>暂无服务项目</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentCategory: 0,
      categories: [
        { id: 0, name: "全部" },
        { id: 1, name: "中医诊疗" },
        { id: 2, name: "针灸推拿" },
        { id: 3, name: "中药调理" },
        { id: 4, name: "养生保健" },
      ],
      serviceList: [
        {
          id: 1,
          name: "中医内科诊疗",
          price: 200,
          description: "通过望闻问切，辨证施治，治疗各种内科疾病",
          image: "/static/services/service1.jpg",
          category: 1,
          tags: ["内科", "诊疗", "中医"],
          appointmentCount: 1234,
        },
        {
          id: 2,
          name: "针灸治疗",
          price: 150,
          description: "通过针灸刺激穴位，调节气血，治疗各种疾病",
          image: "/static/services/service2.jpg",
          category: 2,
          tags: ["针灸", "治疗", "中医"],
          appointmentCount: 856,
        },
        {
          id: 3,
          name: "中药调理",
          price: 180,
          description: "根据个人体质，配制中药方剂，调理身体机能",
          image: "/static/services/service3.jpg",
          category: 3,
          tags: ["中药", "调理", "中医"],
          appointmentCount: 987,
        },
        {
          id: 4,
          name: "推拿按摩",
          price: 120,
          description: "通过推拿手法，舒筋活络，缓解疲劳和疼痛",
          image: "/static/services/service4.jpg",
          category: 2,
          tags: ["推拿", "按摩", "保健"],
          appointmentCount: 654,
        },
        {
          id: 5,
          name: "艾灸疗法",
          price: 100,
          description: "通过艾灸温热刺激，温通经络，调理气血",
          image: "/static/services/service5.jpg",
          category: 2,
          tags: ["艾灸", "疗法", "保健"],
          appointmentCount: 432,
        },
      ],
    };
  },
  computed: {
    filteredServiceList() {
      if (this.currentCategory === 0) {
        return this.serviceList;
      }
      return this.serviceList.filter(
        (item) => item.category === this.currentCategory
      );
    },
  },
  methods: {
    changeCategory(index) {
      this.currentCategory = index;
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/services/detail?id=${id}`,
      });
    },
    makeAppointment(id) {
      uni.navigateTo({
        url: `/pages/appointment/appointment?serviceId=${id}`,
      });
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.category-scroll {
  white-space: nowrap;
  background-color: #fff;
  padding: 20rpx 0;

  .category-item {
    display: inline-block;
    padding: 10rpx 30rpx;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 30rpx;

    &.active {
      background-color: #007aff;
      color: #fff;
    }
  }
}

.service-list {
  padding: 20rpx;

  .service-item {
    display: flex;
    background-color: #fff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    overflow: hidden;

    image {
      width: 200rpx;
      height: 200rpx;
    }

    .service-info {
      flex: 1;
      padding: 20rpx;

      .title-price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;

        .title {
          font-size: 32rpx;
          font-weight: bold;
        }

        .price {
          font-size: 32rpx;
          color: #ff6b6b;
          font-weight: bold;
        }
      }

      .description {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 10rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10rpx;

        .tag {
          font-size: 24rpx;
          color: #007aff;
          background-color: rgba(0, 122, 255, 0.1);
          padding: 4rpx 12rpx;
          border-radius: 4rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
        }
      }

      .appointment-info {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .appointment-count {
          font-size: 24rpx;
          color: #999;
        }

        .appointment-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          background-color: #007aff;
          color: #fff;
          border-radius: 30rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}
</style>